﻿@model ScrumTracker.Models.Story
@{
    ViewBag.Title = "Story #" + Model.IssueId;
    Layout = "~/Views/Shared/_Layout5.cshtml";
}
@if (false)
{
    <script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
}
@section head{
    <script type="text/javascript">
        $(function () {
            $('#newComment').submit(function (e) {
                e.preventDefault();
                var arr = $(this).serializeArray();
                var reqData = {};
                $(arr).each(function (i, prop) {
                    reqData[prop.name] = prop.value;
                });
                if (!reqData["CommentText"] || reqData["CommentText"] == "") {
                    alert('plase enter message');
                    return false;
                }

                $.ajax({
                    url: '@(Url.Action("create", "comments"))',
                    type: 'POST',
                    dataType: 'json',
                    data: JSON.stringify(reqData),
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        if (!data || data.success == false) {
                            alert('error adding comment');
                        }
                        else {
                            $('#commentsCont').html(data.html);
                        }
                    }
                });
            });
        });
    </script>
}
<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" style="overflow: hidden;">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="@Url.Action("Get", "Stories", new { @id = Model.IssueId })">
            Story Details</a></li>
        <li class="ui-state-default ui-corner-top"><a href="@Url.Action("Edit", "Stories", new { @id = Model.IssueId })">
            Edit</a></li>
    </ul>
    <div class="ui-tabs-panel ui-widget-content ui-corner-bottom">
        @Html.DisplayForModel()
        <div id="tabs">
            <ul>
                <li><a href="#tasks">Tasks</a></li>
                <li><a href="#comments">Comments</a></li>
                <li><a href="#attachments">Attachments</a></li>
                <li><a href="#hourlogs">Hour Logs</a></li>
            </ul>
            <div id="tasks">
                <div style="text-align: right;">
                    <a href="@Url.Action("new", "tasks", new { StoryId = Model.IssueId })" class="button">
                        Add Task</a>
                </div>
                <hr />
                @{
                    var grid = new WebGrid(Model.Tasks.OrderByDescending(s => s.PercentDone), canSort: false, canPage: false);
                    @grid.GetHtml(columns:
                    grid.Columns(
                             grid.Column("IssueId", format: @<a href="@Url.Action("Get", "Tasks", new { @id = item.IssueId })">Task
                                 #@item.IssueId</a>),
                    grid.Column("Description"),
                    grid.Column("AssigneeName"),
                    grid.Column("EstimatedHours"),
                    grid.Column("PercentDone")
                             ),
            @*columns:
                grid.Columns(
                grid.Column(format: @<a href="@Url.Action("Get", "Stories", new { @id = item.IssueId })">Story #@item.IssueId</a>),
                    grid.Column("Description"),
                    grid.Column("Priority"),
                    grid.Column("Effort")
                ),*@
 tableStyle: "table-issues",
                         headerStyle: "ui-widget-header"
                     )
                }
            </div>
            <div id="comments">
                <form id="newComment">
                <input type="hidden" name="IssueId" value="@Model.IssueId" />
                <div class="editor-label">
                    <label for="CommentText">
                        Comment Text</label></div>
                <div class="editor-field">
                    <textarea class="text-box multi-line" id="CommentText" name="CommentText"></textarea>
                </div>
                <input type="submit" value="Submit" class="button" />
                </form>
                <hr />
                @*<div>
                    <div>
                        <img style="width: 50px; height: 50px; float: left;"/>
                        <div></div>
                    </div>
                </div>*@
                <div id="commentsCont">
                    @{
                        var commentsGrid = new WebGrid(Model.Comments.OrderByDescending(s => s.CreatedAt), canSort: false, canPage: false);
                        @commentsGrid.GetHtml(tableStyle: "table-issues", headerStyle: "ui-widget-header")
                    }
                </div>
            </div>
            <div id="attachments">
                <script type="text/javascript">
                    $(function () {
                        $('#bucket').bind('ondragover', function () {
                            $(this).css({ backgroundColor: 'Red' });
                        });

                        var bucket = document.getElementById('bucket');
                        bucket.ondragover = function () {
                            $(this).css({ backgroundColor: 'Red' });
                        };
                        bucket.ondragleave = function () {
                            $(this).css({ backgroundColor: 'Green' });
                        };
                        bucket.ondrop = function (e) {
                            e.preventDefault();
                            //console.log(e.dataTransfer);
                            //console.log(e.dataTransfer.files);
                            formdata = new FormData();
                            for (var i = 0; i < e.dataTransfer.files.length; i++) {
                                var file = e.dataTransfer.files[i];
                                formdata.append("images[" + i.toString() + "]", file);
                            }


                            //                            if (window.FileReader) {
                            //                                reader = new FileReader();
                            //                                reader.onloadend = function (e) {
                            //                                    showUploadedItem(e.target.result);
                            //                                };
                            //                                reader.readAsDataURL(file);
                            //                            }

                            $.ajax({
                                url: '@(Url.Action("create", "attachments", new { IssueId = Model.IssueId }))',
                                type: "POST",
                                data: formdata,
                                processData: false,
                                contentType: false,
                                success: function (res) {
                                    //document.getElementById("response").innerHTML = res;
                                    console.log(res);
                                }
                            });
                        };

                        $('#frmUpload').submit(function (e) {
                            e.preventDefault();

                            var files = $('#file')[0].files;
                            formdata = new FormData();
                            for (var i = 0; i < files.length; i++) {
                                var file = files[i];
                                formdata.append("images[" + i.toString() + "]", file);
                            }

                            $.ajax({
                                url: '@(Url.Action("create", "attachments", new { IssueId = Model.IssueId }))',
                                type: "POST",
                                data: formdata,
                                processData: false,
                                contentType: false,
                                success: function (res) {
                                    //document.getElementById("response").innerHTML = res;
                                    //console.log(res);
                                }
                            });

                            return false;
                        });
                    });
                </script>
                <div id="bucket" style="height: 50px; background-color: Green;">
                    Drop file here
                </div>
                <h1>
                    Upload Your Images</h1>
                <form id="frmUpload" action="@(Url.Action("create", "attachments", new { IssueId = Model.IssueId }))" method="post" enctype="multipart/form-data">
                <input type="file" name="file" id="file" />
                <button type="submit">
                    Upload Files!</button>
                </form>
                <div>
                    @foreach (var attachment in Model.Attachments)
                    {
                        <a href="@Url.Content(attachment.RelativePath)" target="_blank">
                            <div class="wrap" style="float: left; width: 128px; margin-left: 10px;">
                                @if (attachment.ContentType.StartsWith("image"))
                                {
                                    <img src="@Url.Content(attachment.RelativePath)" alt="@System.IO.Path.GetFileName(attachment.RelativePath)" style="display: block; width:128px;" />
                                }
                                else
                                {
                                    <img src="@Url.Content("~/content/images/misc.png")" alt="@System.IO.Path.GetFileName(attachment.RelativePath)" style="display: block; width:128px;"/>
                                }
                                <div>@System.IO.Path.GetFileName(attachment.RelativePath)</div>
                            </div>
                        </a>                    }
                    <div style="clear: both;">
                    </div>
                </div>
                @*@{
                    var attachmentsGrid = new WebGrid(Model.Attachments);
                    @attachmentsGrid.GetHtml()
                }*@
            </div>
            <div id="hourlogs">
                @Html.Partial("_HourLogForm", new HourLog() { IssueId = Model.IssueId, CreatedAt = DateTime.UtcNow, AssigneeId = SessionHelper.CurrentUser.UserId })
                <div id="hourLogsCnt">
                    @Html.Partial("_HourLogs", Model.HourLogs.OrderByDescending(hl => hl.CreatedAt).AsEnumerable())
                </div>
            </div>
        </div>
    </div>
</div>
